<template>
	<view>
		<view class="sub_page">
			<view class="sub_header">
				<view v-if="false">
					<view class="sub_address">商家已接单</view>
					<view class="sub_user"> 等待配送</view>
				</view>
				<u-steps current="1" activeIcon="https://img.fy6b.com/2023/02/28/13b96bb4d675f.png"
					inactiveIcon="https://img.fy6b.com/2023/02/28/a0e0afd7601ed.png" activeColor="#DC483C">
					<u-steps-item title="已下单"></u-steps-item>
					<u-steps-item title="制作中"></u-steps-item>
					<u-steps-item title="待取餐"></u-steps-item>
					<u-steps-item title="已完成"></u-steps-item>
				</u-steps>
			</view>
			<view class="sub_rider">
				<view class="rider_box">
					<image class="rider_cover" src="https://img.fy6b.com/2023/03/02/54c76d638b525.png"></image>
					<view class="rider_info">
						<view class="ri_name">李顺达</view>
						<view class="ri_text">骑手快马加鞭送送餐中</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="16"></u-icon>
			</view>
			<ShopOrder></ShopOrder>
			<view class="order_ds_list">
				<view class="or_label">
					订单编号：202302254304059980
				</view>
				<view class="or_label">
					下单时间：2023-02-25 15:03:42
				</view>
				<view class="or_label">
					支付方式：微信支付
				</view>
				<view class="or_label or_address">
					配送地址：广东省广州市天河区珠江西路105号 高德置
					地夏广场
				</view>
				<view class="or_label">
					订单备注：无
				</view>
			</view>
			<view class="order_footer_text">
				如需退款，请致电门店 020-8888880
			</view>
		</view>
	</view>
</template>

<script>
import ShopOrder from "../../components/shopOrder/index.vue"
export default {
	components: {
		ShopOrder,
	},
	data() {
		return {
			text: ''
		};
	}
}
</script>

<style lang="scss" scoped>
.sub_page {
	min-height: 100vh;
	padding: 20rpx;
	background-color: #eeeeee;

	.sub_header {
		background-color: #fff;
		padding: 40rpx 30rpx;
		border-radius: 24rpx;
		text-align: center;

		.sub_address {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}

		.sub_user {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #222222;

			.name {
				margin-right: 30rpx;
			}
		}
	}

	.sub_rider {
		display: flex;
		justify-content: space-between;
		padding: 25rpx 30rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin-top: 20rpx;

		.rider_box {
			display: flex;
			align-items: center;

			.rider_cover {
				width: 110rpx;
				height: 110rpx;
				margin-right: 30rpx;

			}

			.rider_info {
				.ri_name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
				}

				.ri_text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #999999;
					margin-top: 20rpx;
				}
			}
		}

	}

	.order_ds_list {
		padding: 40rpx 30rpx;
		border-radius: 24rpx;
		background-color: #fff;
		margin-top: 29rpx;

		.or_label {
			padding-bottom: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;

		}

		.or_address {
			border-top: 1px solid #eeeeee;
			padding: 30rpx 0;
			margin-top: 10rpx;
		}
	}

	.order_footer_text {
		text-align: center;
		font-size: 24rpx;
		margin-top: 31rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}

}
</style>
